<template>
		<div class="city">
		  <city-header></city-header>
		  <city-search :cities="cities"></city-search>
		  <city-list :hot="hotCities" :cities="cities" :letter="letter"></city-list>
		  <city-alable :cities="cities"@change="handletterChange"></city-alable>
		</div>
</template>

<script>
	import CityHeader from './components/Header'
	import CitySearch from './components/Search'
	import CityList from './components/List'
	import CityAlable from './components/Alable'
	import axios from 'axios'
	export default {
		name: 'City',
		data(){
			return {
				hotCities: {},
				cities:{},
				letter: '',
			}
		},
		components: {
			CityHeader,
			CitySearch,
			CityList,
			CityAlable
		},
		methods: {
			getHomeInfo (){
				axios.get('/api/city2.json').then(this.getHomeInfoSucc)
			},
			getHomeInfoSucc (res) {
				res = res.data 
				if (res.ret && res.data) {
					const data = res.data
					this.hotCities = data.hotCities
					this.cities = data.cities
					console.log(this.hotCities)
					console.log(this.cities)
				}
				console.log(res)
			},
			handletterChange (letter) {
				this.letter = letter
				
			}
		},
		mounted (){
			this.getHomeInfo()
		}
		
	}
</script>

<style lang="stylus" scoped="scoped">
</style>